<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 技能点1：如何依次执行多个函数？
    // 技能点2：当特定的事件发生时，依次执行多个函数？

    function fan1 () {
      console.log('娟娟笑了，我要给娟娟拍照')
    }

    function fan2 () {
      console.log('娟娟哭了，我要给娟娟唱歌')
    }

    function fan3 () {
      console.log('娟娟无聊了，我陪娟娟去钓鱼')
    }
    function fan4 () {
      console.log('娟娟无聊了，我要送娟娟回家')
    }

    function fan5 () {
      console.log('娟娟开心了，我给娟娟送花花')

    }
    
    // 事件管理中心
    let guanjia = {
      // 属性名：就是事件名
      // 属性值：是一个数组，保存观察者
      kaixin: [fan1],
      shangxin: [fan2],
      wuliao: [fan3,fan4]
    }

    // 添加观察者
    // 这个观察者 关心 kaixin 这个事件
    guanjia.kaixin.push(fan5)


    // 添加观察者
    // 这个观察者 关心 wuliao 这个事件
    guanjia.wuliao.push(fan5)



    // 娟娟无聊了
    guanjia.wuliao.forEach(fn => {
      fn()
    })

    // 娟娟开心了
    // 当事件：开心 发生时，所有的 观察者 都执行
    // guanjia.kaixin.forEach(fn => {
    //   fn()
    // })


  </script>
</body>
</html>